<template>
    <div id="login">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form :model="loginForm" :rules="rules" class="login-container" size="medium" @keyup.enter.native="handleClick">
                <h3 class="login_title">用户登录</h3>
                <el-form-item prop="username" >
                    <el-input type="text" v-model="loginForm.username" autofocus ref="username"
                              auto-complete="off" placeholder="用户名/邮箱" prefix-icon="el-icon-user-solid" spellcheck="false">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" autofocus ref="password"
                              auto-complete="off" placeholder="密码" prefix-icon="el-icon-key" v-on:input="change">
                    </el-input>
                </el-form-item>
                <el-form-item style="width: 100%;">
                    <el-checkbox class="login_remember" v-model="checked" >
                        <span style="color: #409EFF">记住我</span>
                        <label style="color: #949493">不是自己电脑请勿勾选</label>
                    </el-checkbox>
                    <router-link to="resetPassword" style="float: right; text-decoration: none; color: #50b6ff">找回密码？</router-link>
                </el-form-item>


               <el-popover
                    placement="bottom"
                    trigger="click" style="opacity: 0.7">
                    <template #reference>
                        <!--滑动图片弹窗验证-->
                        <PuzzleVerification v-model="isVerificationShow" :puzzleImgList="puzzleImgList" blockType="puzzle"
                                            :onSuccess="handleSuccess" :onError="handleError"/>
                    </template>
                </el-popover>

                <el-form-item style="width: 100%">
                    <el-button type="primary" class="button_login"   @click="handleClick()">登录</el-button>
                    <router-link to="register">
                        <el-button type="primary" class="button_register">注册</el-button>
                    </router-link>
                </el-form-item>
            </el-form>
        </el-col>
  

        <p class="login-copyright">© 2020 lkq 版权所有</p>
    </div>
</template>

<script>
import PuzzleVerification from 'vue-puzzle-verification'
export default {
    components: {PuzzleVerification},
    name: 'Login',
    data() {
        return {
            isVerificationShow: false,
            rules: {
                username: [{required: true, message: '用户名或邮箱不能为空', trigger: 'change'}],
                password: [{required: true, message: '密码不能为空', trigger: 'change'}]
            },
            checked: true,
            loginForm: {
                username: '',
                password: ''
            },
            puzzleImgList: [
                require("../assets/verify/1.jpg"),
                require("../assets/verify/2.jpg"),
                require("../assets/verify/3.jpg"),
                require("../assets/verify/4.jpg"),
                require("../assets/verify/5.jpg"),
                require("../assets/verify/6.jpg"),
                require("../assets/verify/7.jpg"),
                require("../assets/verify/8.jpg"),
                require("../assets/verify/9.jpg"),
                require("../assets/verify/10.jpg"),
            ],
            isInput: false,
        }
    },
    methods: {
        handleSuccess() {
            // 验证通过后关闭图片验证
            this.isVerificationShow = false;
            // 将数据传送到后端验证
            console.log("验证成功")
            // 将数据传送到后端验证
            this.login()
        },
        handleError() {
            // 滑动验证失败
            console.log("验证失败")
        },
        handleClick() {
            if (this.loginForm.username === '' || this.loginForm.password === '') {
                // 点击登录时，如果用户名或者密码未输入，那么提醒用户输入
                if (this.loginForm.username === '') {
                    this.$message({
                        message: '警告, 用户名或邮箱未输入哦',
                        type: 'warning'
                    });
                    this.$refs.username.focus();
                }else {
                    this.$message({
                        message: '警告, 密码未输入呀',
                        type: 'warning'
                    });
                    this.$refs.password.focus();
                }
            }else {
                this.isVerificationShow = true;
            }
        },
        change() {
           // 如果监听到输入框发生变化，那么采用用户输入的密码
           this.isInput = true;
        },
    	login() {
    		//..,将数据传送给后端
               //采用这个方式后端接口的方式必须采用对象的方式来接收参数 User
          this.$axios
            .post("api/loginIn", { 
                username: this.loginForm.username, 
                password: this.loginForm.password
            })
            .then(res => {
                // console.log("输出response.data.status", res.data.status);
                if (res.data.code === 200) {
                this.$router.push({ path: "/HomePage" });
                } else {
                alert("您输入的用户名或密码错误！");
                }
            });
    	}         
    }
}
</script>

 登录有验证码提示
// :model="loginForm" : 表单的数据对象。
// :rules="rules : 表单验证规则。
// @keyup.enter.natice="handleClick": enter键函数，用户输入数据后可以直接enter键，不一定要点击按钮。
// 记住我：利用cookie来存储登录信息，不是重点。
// 找回密码：利用邮箱找回密码，不是重点，下一趴再介绍吧。
// el-popover : element中的弹出框，作为容器。
// trigger=click: 触发方式，点击触发。
// #reference : 触发 Popover 显示的 HTML 元素。
// :puzzleImgList="puzzleImgList": 传入的拼图背景图片。
// blockType:滑块的形状。
// ————————————————
// 版权声明：本文为CSDN博主「我家有只小金毛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/wohuizuofan1/article/details/115595562

<style scoped >
 #login {
    background-image: url('../assets/picture/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
}
.login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 10% 40% 0 40%;
    width: 20%;
    padding: 25px 30px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    opacity: 0.7;
}



.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

.login_remember {
    margin: 0px;
    text-align: left;
    float: left;

}

.button_login {
    width: 40%;
    background: #409EFF;
    border: none;
    float: left
}

.button_register {
    width: 40%;
    background: #505458;
    border: none;
    float: right;
}

.login-copyright {
    color: #eee;
    padding-bottom: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

@media screen and (min-height: 550px) {
    .login-copyright {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
    }
}


    
</style>
